<template>
  <div>
<h3>Vue的语法----HTML模版语法（HTML标签中有JS代码）</h3>
<p>HTML模版语法包含两个语法（{{}} 指令）</p>
<p>{{str}}</p>
<p>{{num}}</p>
<hr>
<p>str:{{data.str}}</p>
<p>num:{{data.num}}</p>
<p>name:{{data.person.name}} ---- age:{{data.person.age}}</p>
<input type="button" value="修改str的值" v-on:click="fn">
<input type="button" value="修改num的值" v-on:click="fn1">
<input type="button" value="修改data中的值" v-on:click="fn2">
  </div>
</template>

<script setup lang="ts">

import {reactive, ref} from 'vue'

let str=ref("hello Vue")
let num=ref(0)

function fn(){
  str.value="hello 2202B"
}

function fn1(){
  num.value++;
}
function fn2(){
data.str="你好世界";
data.num=200;
data.person.name="老金";
data.person.age=30
}

let data=reactive({
  str:"hello Vue --- 你好",
  num:100,
  person:{
    name:"李四",
    age:40
  }
})
</script>

<style scoped>

</style>